import React, { Component } from 'react';
import { StyleSheet, View, Text } from 'react-native';
import { NavigationEvents } from 'react-navigation';
import { style } from '../../../../../../theme/style';
import { GLOBAL } from '../../../../../../config/global';

const scale = GLOBAL.SCALE;
const statusObj = {
	null: { key: 'null', status: '未认证', operate: '认证', color: '#0E5BC6' },
	usable: { key: 'usable', status: '已认证', operate: '', color: '#19977B' },
	isexpired: { key: 'isexpired', status: '已过期', operate: '认证', color: '#AAB1BF' },
}

export class CreditCpt extends Component {
	constructor(props) {
		super(props);
		this.state = {
			previewModalVisible: false,
			loading: false
		}
	}

	_checkStatus (data) {
		let { isChange } = this.props || {};
		let { qualificationType, qualificationAddress, expireDate, companyId, isExpired, isAuditing } = data || {};
		let lsObj = JSON.stringify(statusObj);
		lsObj = JSON.parse(lsObj);
		if (qualificationAddress) {
			if (isExpired == '-1') {
				if (isChange) {
					// lsObj['isexpired'].operate = `有效期至${expireDate && expireDate.substring(0, 10) || '--'}`;
				}
				return lsObj['isexpired'];
			} else {
				if (isAuditing) {
					// lsObj['null'].operate = `有效期至${expireDate && expireDate.substring(0, 10) || '--'}`;
					return lsObj['null'];
				} else {
					// lsObj['usable'].operate = `有效期至${expireDate && expireDate.substring(0, 10) || '--'}`
					return lsObj['usable'];
				}
			}
		} else {
			if (isChange) {
				// lsObj['null'].operate = '';
			}
			return lsObj['null'];
		}
	}

	render () {
		let { data, index, length, isChange, ifEdit, refresh, onPress, changeIndex, checkQualificationImage } = this.props || {};
		let { qualificationType, qualificationTypeText, qualificationAddress, expireDate, companyId, isExpired, isAuditing, operateType,isAuditTag } = data || {};
		let status = data && this._checkStatus(data);
		let qualificationText = qualificationTypeText && qualificationTypeText.length > 12 ? qualificationTypeText.substring(0, 11) + '...' : qualificationTypeText;
		return (
			<View style={[styles.item, index !== (length - 1) ? styles.border : null]}>
				<NavigationEvents
					onWillFocus={({ action }) => {
						refresh && refresh();
					}} />
				<View style={[styles.row, { width: 170 * scale }]}>
					<Text style={[styles.qualificationText,changeIndex?{color:style.color.themeColor}:null]}
					 onPress={() => {changeIndex?checkQualificationImage && checkQualificationImage(data):null }}
					 >{qualificationText || '--'}</Text>
					{companyId && (operateType == 'U' || operateType == 'C' || operateType == 'D') && changeIndex ? <Text style={styles.changeText}>({operateType == 'D' ? '删' : operateType == 'U' ? '变' : operateType == 'C' ? '增' : ''})</Text> : null}
				</View>
				{isAuditTag ? <View style={styles.auditingBorder}><Text style={styles.auditingText}>审</Text></View> : null}
				<View style={{width:110*scale}}>
				<View style={styles.rightView}>
					<View style={[styles.circle, { backgroundColor: status.color }]}></View>
					<Text style={styles.commonText}>{status.status}</Text>
				</View>
				<View style={styles.rightView}>
					{/*  isChange =true 代表是不能编辑的   */}
					{
						expireDate ? 
						<Text style={styles.usableText}>有效期至{expireDate && expireDate.substring(0, 10) || '--'}</Text> : 
						null
						// <Text style={status.key == 'usable' ? styles.usableText : styles.expiredBtn} onPress={() => { !isChange && onPress && onPress() }}>{status.operate}</Text>
					}
				</View>
				</View>
			</View>
		)
	}
}

const styles = StyleSheet.create({
	item: {
		flexDirection: 'row',
		alignItems: 'center',
		justifyContent: 'space-between',
		paddingTop: 14 * scale,
		paddingBottom: 6 * scale,
	},
	border: {
		borderBottomWidth: 1 * scale,
		borderBottomColor: '#E3E7F0'
	},
	row: {
		flexDirection: 'row',
		alignItems: 'center',
		justifyContent: 'flex-start',
		// paddingLeft: 6 * scale,
		paddingBottom: 8 * scale,
	},
	qualificationText: {
		fontSize: 12 * scale,
		// color: style.color.themeColor
	},
	circle: {
		width: 7 * scale,
		height: 7 * scale,
		borderRadius: 7 * scale,
		marginRight: 5 * scale
	},
	commonText: {
		fontSize: 12 * scale,
		color: '#34475F',
		// marginRight: 10 * scale,
		borderBottomWidth: 1 * scale,
		borderBottomColor: '#E3E7F0',
		fontWeight: 'bold'
	},
	usableText: {
		fontSize: 10 * scale,
		color: '#BBBDC0',
	},
	expiredBtn: {
		fontSize: 12 * scale,
		color: style.color.themeColor,
		fontWeight: 'bold'
	},
	rightView: {
		// width: 64 * scale,
		flexDirection: 'row',
		alignItems: 'center',
		justifyContent: 'flex-end'
	},
	auditingText: {
		color: '#F7B500',
		fontSize: 12 * scale,
		marginTop:2* scale,
	},
	auditingBorder: {
		height: 18* scale,
		width: 18* scale,
		borderWidth: 1 * scale,
		borderColor: '#F7B500',
		borderRadius: 14 * scale,
		flexDirection: 'row',
		alignItems: 'center',
		justifyContent: 'center',
	},
	preview: {
		height: GLOBAL.SCREEN_HEIGHT,
		backgroundColor: 'rgba(0,0,0,.5)',
		alignItems: 'center',
		justifyContent: 'center'
	},
	changeText: {
		color: style.color.fontRed1,
		fontSize: 12 * scale,
		paddingLeft: 3 * scale
	},
	attachment: {
		width: 100 * scale,
		height: 100 * scale,
		marginRight: 12 * scale,
		marginBottom: 12 * scale,
	},
	cover: {
		width: 98 * scale,
		height: 98 * scale,
	},
})